<template>
  <div class="icons">
    <van-swipe class="my-swipe" :loop="false" indicator-color="#717070">
      <van-swipe-item v-for="(item,key) in page" :key="key">
        <div class="icons-item" v-for="page in item">
          <img :src="page.imgUrl">
          <p>{{page.title}}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "icons",
  props:['iconsList'],
  computed: {
    page(){
      let pages = []
      this.iconsList.forEach((item,index) =>{
        let idx = Math.floor(index/8);
        if (!pages[idx]) pages[idx] = [];
        pages [idx].push(item)
      })
      return pages
    }
  }
}
</script>

<style scoped>
  .icons{
    background: #fff;
  }
  .icons-item{
    width: 25%;
    padding-bottom: 25%;
    height: 0;
    float: left;
  }
  .icons-item img{
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    margin: 0 auto;
    padding-top: .2rem;
  }
  .icons-item p{
    margin-top: .1rem;
    font-size: .28rem;
    text-align: center;
    color: #212121;
  }
  .my-swipe{
    loop:false
  }
</style>
